<template>
  <div class="app-container">
    <HeaderTool  @selectDate="selectDate"  @exportExcel="exportExcel"></HeaderTool>
    <!--  两列图表 -->
    <el-row :gutter="20">
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
        <el-card  class="padding-top-bottom-16 padding-left-right-6">
          <div class="flex justify-content-space-between align-center">
            <div class="flex-auto">
              <div class="flex align-center">
                <img src="@/assets/static/门诊患者基本药物人次.png" class="icon" style="width:20px;margin-right: 10px" />
                <div style="font-size: 20px;font-weight: 600">每名执业医师日均住院工作负担</div>
              </div>
              <div class="flex align-center justify-content-center" style="color:#858E98;padding: 20px 0">
                <span style="color: #4677F7;font-size: 32px;font-weight: bolder;padding-right: 10px">14.46</span> / 人</div>
              <div class="flex justify-content-space-between">
                <div>
                  <div style="padding-bottom: 10px">全年实际占用总床日数</div>
                  <el-input v-model="input1"></el-input>
                </div>
                <div >
                  <div style="padding-bottom: 10px">医院平均执业医师人数</div>
                  <el-input v-model="input2"></el-input>
                </div>
              </div>
            </div>
            <img style="width: 150px;height: 150px;margin-left: 40px" src='@/assets/static/执业医院-图.png' alt="">
          </div>
          <div style="padding-top: 20px;color:#858E98 ">计算公式：全年实际占用总床日数 / 医院平均执业（助理）医师人数 / 365</div>
          <div class="chart_content  padding-20" style="margin-top: 20px;">
            <EchartsComponent  style="margin-right: 10px;" :options="chartOptions[0]" class="charts-common flex-auto">
              <div style="position: absolute;top: 0;right: 20px;z-index: 10;width: 200px;">
                <el-select v-model="input3" placeholder="请选择时间">
                  <el-option label="最近7天" value="shanghai" />
                  <el-option label="最近6个月" value="beijing" />
                </el-select>
              </div>
            </EchartsComponent>
          </div>
        </el-card>
      </el-col>
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
        <el-card  class="padding-top-bottom-16 padding-left-right-6">
          <div class="flex justify-content-space-between align-center">
            <div class="flex-auto">
              <div class="flex align-center">
<!--                <img src="" class="icon border" style="width: 30px;height: 30px;margin-right: 10px" />-->
                <img src="@/assets/static/病床药师.png" class="icon" style="width:20px;margin-right: 10px" />
                <div style="font-size: 20px;font-weight: 600">每百张病床药师人数 </div>
              </div>
              <div class="flex align-center justify-content-center" style="color:#858E98;padding: 20px 0">
                <span style="color: #4677F7;font-size: 32px;font-weight: bolder;padding-right: 10px">14.46</span> / 人</div>
              <div class="flex justify-content-space-between">
                <div>
                  <div style="padding-bottom: 10px">医院药师总人数</div>
                  <el-input v-model="input4"></el-input>
                </div>
                <div >
                  <div style="padding-bottom: 10px">医院实际开放床位数</div>
                  <el-input v-model="input5"></el-input>
                </div>
              </div>
            </div>
            <img style="width: 150px;height: 150px;margin-left: 40px" src='@/assets/static/病床药师-图.png' alt="">

          </div>
          <div style="padding-top: 20px;color:#858E98 ">计算公式：(医院药师总人数 / 医院实际开放床位数) × 100</div>
          <div class="chart_content  padding-20" style="margin-top: 20px;">
            <EchartsComponent  style="margin-right: 10px" :options="chartOptions[0]" class="charts-common flex-auto">
              <div style="position: absolute;top: 0;right: 20px;z-index: 10;width: 200px;">
                <el-select v-model="input6" placeholder="请选择时间">
                  <el-option label="最近7天" value="shanghai" />
                  <el-option label="最近6个月" value="beijing" />
                </el-select>
              </div>
            </EchartsComponent>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!--  两列图表 -->
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
        <el-card  class="padding-top-bottom-16 padding-left-right-6 " style="padding-bottom: 30px;position: relative">
          <el-row :gutter="20">
            <el-col style="margin-top: 20px;" :xs="12" :sm="12" :md="12" :lg="12">
              <div  class="flex align-center">
                <img src="@/assets/static/门诊患者基本药物人次.png" class="icon" style="width: 20px;margin-right: 10px" />
                <div style="font-size: 16px;font-weight: 600">执业医师名单<span style="color: #858E98;font-weight: 400;padding-left: 10px">总计：{{staffDoctorList.totalCount}}人</span></div>
              </div>
            </el-col>
            <el-col style="margin-top: 20px;" :xs="12" :sm="12" :md="12" :lg="12">
              <div class="flex justify-content-end" style="gap: 20px">
                <div style="width: 150px">
                  <el-select v-model="doctorRequestData.deptId" clearable placeholder="按科室筛选" @change="getStaffDoctorInfoList">
                    <el-option v-for="(item,index) in deptList" :key="index" :label="item.deptmentName" :value="item.deptId" />
                  </el-select>
                </div>
                <div style="width: 150px">
                  <el-select v-model="doctorRequestData.positionCode" clearable placeholder="按职称筛选" @change="getStaffDoctorInfoList">
                    <el-option v-for="(item,index) in doctorPositionList" :key="index" :label="item.positionName" :value="item.positionCode" />
                  </el-select>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-table :data="staffDoctorList.list"  style="width: 100%;margin-top: 20px">
            <el-table-column align="center" width="100px" prop="staffName" label="姓名" />
            <el-table-column align="center" prop="deptmentName" label="科室" />
            <el-table-column align="center" prop="positionName" label="职称" />
            <el-table-column align="center" prop="discipline" label="专业方向"/>
            <el-table-column align="center" prop="tenureValue" label="执业年限" />
          </el-table>
          <pagination :total="Number(staffDoctorList.totalCount)" v-model:page="doctorRequestData.pageNumber" v-model:limit="queryParams.maxResultCount" @pagination="getStaffDoctorInfoList" />
        </el-card>
      </el-col>
      <el-col style="margin-top: 20px;" :xs="24" :sm="24" :md="12" :lg="12">
        <el-card  class="padding-top-bottom-16 padding-left-right-6  " style="padding-bottom: 30px;position: relative;">
          <el-row :gutter="20">
            <el-col style="margin-top: 20px;" :xs="12" :sm="12" :md="12" :lg="12">
              <div  class="flex align-center">
                <img src="@/assets/static/病床药师.png" class="icon" style="width: 20px;margin-right: 10px" />
                <div style="font-size: 16px;font-weight: 600">药师名单<span style="color: #858E98;font-weight: 400;padding-left: 10px">总计：{{staffChemistList.totalCount}}人</span></div>
              </div>
            </el-col>
            <el-col style="margin-top: 20px;" :xs="12" :sm="12" :md="12" :lg="12">
              <div class="flex" style="gap: 20px">
                <div style="width: 150px">
                  <el-select v-model="chemistRequestData.posTypeCode" clearable placeholder="按类别筛选" @change="getStaffChemistInfoList">
                    <el-option v-for="(item,index) in posTypeList" :key="index" :label="item.posTypeName" :value="item.posTypeCode" />
                  </el-select>
                </div>
                <div style="width: 150px">
                  <el-select v-model="chemistRequestData.positionCode" clearable placeholder="按职称筛选" @change="getStaffChemistInfoList">
                    <el-option v-for="(item,index) in chemistPositionList" :key="index" :label="item.positionName" :value="item.positionCode" />
                  </el-select>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-table :data="staffChemistList.list"  style="width: 100%;margin-top: 20px">
            <el-table-column align="center"  width="100px" prop="staffName" label="姓名" />
            <el-table-column align="center" prop="deptmentName" label="科室" />
            <el-table-column  align="center" prop="title" label="职称" />
            <el-table-column align="center" prop="discipline" label="专业方向"/>
            <el-table-column align="center" prop="tenureValue" label="执业年限" />
          </el-table>
          <pagination :total="Number(staffChemistList.totalCount)" v-model:page="chemistRequestData.pageNumber" v-model:limit="queryParams.maxResultCount" @pagination="getStaffChemistInfoList" />
        </el-card>
      </el-col>
    </el-row>
    <CustomDialog v-model:analyzeDialogVisible="analyzeDialogVisible"></CustomDialog>
  </div>
</template>
<script setup>
import {ref} from 'vue';
import EchartsComponent from "@/components/ECharts/index.vue";
import HeaderTool from "@/components/HeaderTool/index.vue";
import {
  getChemistPosition,
  getDeptName,
  getDoctorPosition,
  getPostType, getStaffChemistList, getStaffDoctorList,
} from "@/api/efficiency/resource.js";
const analyzeDialogVisible = ref(false);
// 选择历史时间
const selectDate = (time) => {
  console.log("选择的历史时间是:",time);
};
// 导出excel文件
const exportExcel = () => {
  console.log("导出excel文件")
  analyzeDialogVisible.value = true;
};
let input1 = ref();
let input2 = ref();
let input3 = ref();
let input4 = ref();
let input5 = ref();
let input6 = ref();

const deptList = ref([]);  //执业医师名单科室下拉列表
const doctorPositionList = ref([]);  //执业医师名单职位下拉列表
const staffDoctorList = ref({
  list:[],
  totalCount: 0,
  pageNumber: 1,
  pageSize: 10,
  totalPages: 1
});
//执业医师名单表格
const doctorRequestData = ref({  // 医师请求参数
  pageNumber:1,
  deptId:null,
  positionCode:null
});
const posTypeList = ref([]);  //药师名单类别下拉列表
const chemistPositionList = ref([]);  //药师职位下拉列表
const staffChemistList = ref({
  list:[],
  totalCount: 0,
  pageNumber: 1,
  pageSize: 10,
  totalPages: 1
});  //药师表格
const chemistRequestData = ref({  // 药师请求参数
  pageNumber:1,
  posTypeCode:null,
  positionCode:null
});
const chartOptions = ref([
  {
    title: {
      text: '月度手术并发症趋势',
      left: 'left'
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }
    ]
  },
  {
    title: {
      text: '单病种质量控制',
      left: 'left'
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  },
  {
    title: {text: '日间手术占择期手术比例'},
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'Direct',
        type: 'bar',
        barWidth: '60%',
        data: [10, 52, 200, 334, 390, 330, 220]
      }
    ]
  },
  {
    title: {
      text: '单病种质量控制',
      left: 'left'
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
]);
const queryParams = ref({
  maxResultCount: 10
});
const total = ref(10);


// 获取医师科室基础数据
const getDeptNameList = async () => {
  let result = await getDeptName();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    deptList.value = data;
  }
}
//获取医师职位基础数据
const getDoctorPositionList = async () => {
  let result = await getDoctorPosition();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    doctorPositionList.value = data;
  }
}
// 获取药师类别信息
const getPostTypeList = async () => {
  let result = await getPostType();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    posTypeList.value = data;
  }
}
//获取药师职位基础数据
const getChemistPositionList = async () => {
  let result = await getChemistPosition();
  let data = result.data.data;
  if (result.status == 200 && result.data.code == 200){
    chemistPositionList.value = data;
  }
}

//获取执业医师名单数据
const getStaffDoctorInfoList = async () => {
  let result = await getStaffDoctorList(doctorRequestData.value);
  if (result.status == 200 && result.data.code == 200){
    let { items,totalCount,pageNumber,pageSize,totalPages } = result.data.data;
    console.log("获取执业医师名单数据",result.data.data)
    staffDoctorList.value.list = items;
    staffDoctorList.value.totalCount = totalCount;
    staffDoctorList.value.pageNumber = pageNumber;
    staffDoctorList.value.pageSize = pageSize;
    staffDoctorList.value.totalPages = totalPages;
  }
}

//获取执业药师名单数据
const getStaffChemistInfoList = async () => {
  let result = await getStaffChemistList(chemistRequestData.value);
  if (result.status == 200 && result.data.code == 200){
    console.log("获取执业药师名单数据",result.data.data)
    let { items,totalCount,pageNumber,pageSize,totalPages } = result.data.data;
    staffChemistList.value.list = items;
    staffChemistList.value.totalCount = totalCount;
    staffChemistList.value.pageNumber = pageNumber;
    staffChemistList.value.pageSize = pageSize;
    staffChemistList.value.totalPages = totalPages;
  }
}





const getAllRequest = ()=>{
  getDeptNameList();
  getDoctorPositionList();
  getPostTypeList();
  getChemistPositionList();
}
getAllRequest()
getStaffDoctorInfoList()
getStaffChemistInfoList()



</script>
<style lang='scss' scoped>
.app-container {
  height: calc(100vh - 84px);
  overflow-y: scroll;
  /* 针对 WebKit 内核浏览器（如 Chrome、Safari） */
  scrollbar-width: none;
  -ms-overflow-style: none;
  .el-card {
    border-radius: 13px;
    border: none;
  }
  .title {
    font-size: 16px;
    color: #858E98;
  }
  .icon {
    height: 20px;
  }
  .count {
    color: #464646;
    font-size: 30px;
    font-weight: 600;
    padding: 14px 0;
  }
  .charts-common{
     height: 300px;
  }
}
</style>
